<template>
  <div>
    <!--卡片视图区域-->
    <el-card>
      <!--查询条件表单区域-->
      <el-row>
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
          <el-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
            <el-form-item size="small" label="课程名称">
              <el-select size="small" v-model="queryForm.name" placeholder="选择课程">
                <el-option v-for="course in courseList"
                           :key="course.courseId"
                           :label="course.courseName"
                           :value="course.courseId"
                           size="small"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
            <el-button type="primary" size="small" @click="filterData(queryForm.name)">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
      <!--成绩列表-->
      <el-row>
        <el-table
          :data="scoreList" border stripe>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="experName" label="实验项目" width="180"></el-table-column>
          <el-table-column prop="username" label="教师"></el-table-column>
          <el-table-column prop="teamIds" label="是否团队">
            <template v-slot:default="scope">
              <div v-if="scope.row.teamIds === undefined || scope.row.teamIds === '' || scope.row.teamIds === null">
                否
              </div>
              <div v-if="scope.row.teamIds !==  ''&&scope.row.teamIds !== null">
                是
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="teamIds" label="团队成员"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot:default="scope">
              <el-tag type="info" v-if="scope.row.status === '1'">
                编辑中
              </el-tag>
              <el-tag type="warning" v-if="scope.row.status === '2'">
                已提交
              </el-tag>
              <el-tag type="success" v-if="scope.row.status === '3'">
                已批阅
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="成绩" align="center">
            <el-table-column
              prop="previewScore"
              label="预习成绩"
              width="120">
            </el-table-column>
            <el-table-column
              prop="acceptanceScore"
              label="验收成绩"
              width="120">
            </el-table-column>
            <el-table-column
              prop="reportScore"
              label="报告成绩"
              width="120">
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      scoreList: [],
      scoreListSize: 0,
      courseList: [],
      defaultCourse: '',
      queryForm: {
        name: ''
      }
    }
  },
  async created () {
    await this.getCoursesList()
    this.queryForm.name = this.defaultCourse.courseId
    await this.filterData()
  },
  methods: {
    async getCoursesList () {
      const { data: res } = await this.$http.post('/getCoursesByStuId')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status === 401) {
        this.$message.error(res)
        await this.$router.push('/login')
      }
      if (res.status !== 200) this.$message.error(res.data.msg)
      if (res.status === 200) {
        this.courseList = res.data.courseList
        this.defaultCourse = this.courseList[0]
      }
    },
    async getReportScoreList (courseId) {
      const { data: res } = await this.$http.post('/getReportScoreByStuIdAndCourseId', { courseId: courseId })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status === 401) {
        this.$message.error(res)
        await this.$router.push('/login')
      }
      if (res.status !== 200) this.$message.error(res.data.msg)
      if (res.status === 200) {
        this.scoreList = res.data.scoreList
      }
    },
    async filterData () {
      await this.getReportScoreList(this.queryForm.name)
      this.scoreListSize = this.scoreList.length
      if (this.scoreListSize === 0) {
        this.$message.info('暂无成绩')
      } else {
        this.$message.success(`查询到${this.scoreListSize}个结果`)
      }
    }
  }
}
</script>

<style scoped>

</style>
